<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
  <!-- <HelloWorld msg="Hello Vue 3 + Vite" /> -->
  <Basic name="张三" :age="age" ref="basic1"></Basic>
  <BasicSetup :age="age" @fatherChange="fatherChange"
    dataStatus="activated" ref="basic2"
  ></BasicSetup>

  <div class="aaa" ref="aaa">

  </div>

  <button @click="change()">改变</button>
</template>

<script setup>
  // This starter template is using Vue 3 <script setup> SFCs
  // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
  // 现在在使用vue3的setup，所以不需要写components挂载HelloWorld组件了，直接就可以使用
  import HelloWorld from './components/HelloWorld.vue'
  import Basic from './components/Demo/Basic.vue'
  import BasicSetup from './components/Demo/BasicSetup.vue'
  import { ref, onMounted } from 'vue'


  let age = ref(15)

  function change() {
    age.value++
  }

  function fatherChange(val) {
    age.value = val
  }

  let basic1 = ref()
  let aaa = ref();
  onMounted(() => {
    console.log(basic1.value.bh1dom); 
    console.log(aaa.value)
  });

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
